<template>
  <div ref="gantt"></div>
</template>

<script>
import {gantt} from 'dhtmlx-gantt';

export default {
    name: 'GanttChar',
    data() {
      return {
        tasks: {
          data: [
            {
              id: 1,
              totalNumber: "PMA21",
              branchNumber: "MA11P",
              branchNumberType: "单曲",
              longM: "20105",
              widthM: "20105",
              highM: "11600",
              branchT: "7910",
              start_date: "2022-10-3",
              duration: 30
            },
            {
              id: 11,
              totalNumber: "备料",
              start_date: "2022-10-3",
              duration: 3,
              parent: 1
            },
            {
              id: 12,
              totalNumber: "切割",
              start_date: "2022-10-7",
              duration: 3,
              parent: 1
            },
            {
              id: 13,
              totalNumber: "加工",
              start_date: "2022-10-10",
              duration: 3,
              parent: 1
            },
            {
              id: 14,
              totalNumber: "小组",
              start_date: "2022-10-13",
              duration: 3,
              parent: 1
            },
            {
              id: 16,
              totalNumber: "中组",
              start_date: "2022-10-16",
              duration: 3,
              parent: 1
            },
            {
              id: 17,
              totalNumber: "大组",
              start_date: "2022-10-16",
              duration: 3,
              parent: 1
            },
            {
              id: 18,
              totalNumber: "火工校正",
              start_date: "2022-10-19",
              duration: 3,
              parent: 1
            },
            {
              id: 19,
              totalNumber: "预舾装",
              start_date: "2022-10-22",
              duration: 3,
              parent: 1
            },
            {
              id: 111,
              totalNumber: "一次总组",
              start_date: "2022-10-23",
              duration: 3,
              parent: 1
            },
            {
              id: 112,
              totalNumber: "分段涂装",
              start_date: "2022-10-24",
              duration: 3,
              parent: 1
            },
            {
              id: 113,
              totalNumber: "二次总组",
              start_date: "2022-10-25",
              duration: 3,
              parent: 1
            },
            {
              id: 114,
              totalNumber: "总段舾装",
              start_date: "2022-10-26",
              duration: 5,
              parent: 1
            },
            {
              id: 2,
              totalNumber: "PMA21",
              branchNumber: "MA11L",
              branchNumberType: "双曲",
              longM: "20105",
              widthM: "12420",
              highM: "7910",
              branchT: "79",
              start_date: "2022-10-15",
              duration: 5,
            },
            {
              id: 3,
              totalNumber: "PMA11",
              branchNumber: "MA11R",
              branchNumberType: "平直",
              longM: "20105",
              widthM: "12420",
              highM: "7910",
              branchT: "7910",
              start_date: "2022-10-01",
              duration: 10,
            },
            {
              id: 4,
              totalNumber: "PMA11",
              branchNumber: "MA11S",
              branchNumberType: "特殊",
              longM: "20105",
              widthM: "11600",
              highM: "7910",
              branchT: "7910",
              start_date: "2022-10-01",
              duration: 5,
            }
          ],
        },
      };
    },
    props: {},

    created() {
    },

    mounted: function () {
      this.initConfig();
    },

    methods: {
      // 初始化甘特图数据
      initData() {

      },
      reload() {
        this.addTodayLine();
      },
      addTodayLine() {
        // 时间线
        var date_to_str = gantt.date.date_to_str(gantt.config.task_date);
        var today = new Date();
        gantt.addMarker({
          start_date: today,
          css: "today",
          text: "今天",
          title: "今天: " + date_to_str(today)
        });
      },
      // 初始化甘特图配置
      initConfig() {
        // 1 基础配置
        // 1.1 甘特图是否只读
        gantt.config.readonly = true;
        // 1.2 表格列设置

        // gantt.config.duration_unit = "hour";
        // gantt.config.duration_step = 8;
        gantt.config.grid_width = 520;
        gantt.config.columns = [
          {name: "totalNumber", label: "总段号", tree: true, width: '120'},
          {name: "branchNumber", label: "分段号", align: "center", width: '*'},
          {name: "branchNumberType", label: "分段类型", align: "center", width: '*'},
          {name: "longM", label: "长m", align: "center", width: '*'},
          {name: "widthM", label: "宽m", align: "center", width: '*'},
          {name: "highM", label: "高m", align: "center", width: '*'},
          {name: "branchT", label: "分段重量t", align: "center", width: '*'},
        ];
        gantt.config.scale_unit = "year"
        gantt.config.step = 1;
        gantt.config.date_scale = "%Y";
        gantt.config.subscales = [{unit: "day", step: 0, date: "%j"}, {unit: "month", step: 1, date: "%m"}];
        // 2.3 时间坐标为月份的时候  先显示年份再月份
        // gantt.config.subscales = [{unit: "month", step: 1, date: "%Y,%F"}];
        // 1.7 显示单元格
        gantt.config.show_task_cells = true;

        // 2.4 定义从后端获取或发送到后端的日期数据解析格式
        gantt.config.xml_date = "%Y-%m-%d %H:%i:%s";
        // 当右侧不止显示年份时，可以添加展示月日，添加一个就加一行
        gantt.config.scale_height = 80;
        // 甘特图右侧表头的高度
        gantt.config.min_column_width = 25;
        //下面日期的宽度，会随时间长短宽度变化。但是设置最小宽度后，当时间跨度到达一定长度，就会展示最小宽度
        gantt.i18n.setLocale("cn");

        // 1.4 鼠标悬浮框
        gantt.plugins({tooltip: true});// 启用tooltip悬浮框
        gantt.templates.tooltip_text = function (start, end, task) {
          return "<b style='text-align:left;'>总段号:</b> " + task.totalNumber;
        };

        gantt.templates.task_text = function (start, end, task) {
          return task.totalNumber;
        };

        //使用中文
        gantt.config.work_time = true;
        gantt.config.correct_work_time = true;
        //跳过节假日：比如你选择的包含周六日，他会自动延长时间或者缩短，延长或者缩短是因为包含节假日，要增加或者减少天数。
        gantt.config.inherit_scale_class = true;

        // 3 拖动配置
        // 3.1 自动调整类型,当存在子节点时自动升级为project
        gantt.config.auto_types = false;
        // 3.2 设置不可以拖动进度
        gantt.config.drag_progress = false;
        // 3.3 设置Task不可以拖动
        gantt.config.drag_move = false;
        // 3.4 设置不可以拖动关系
        gantt.config.drag_links = false;
        // 3.5 设置不可拖动Task 大小
        gantt.config.drag_resize = false;
        // 3.6 单击显示添加详情
        gantt.config.details_on_create = false;
        // 3.7 双击显示明细
        gantt.config.details_on_dblclick = false;


        gantt.init(this.$refs.gantt);
        // 初始化
        gantt.parse(this.tasks);


      }
    }
  }
</script>

<style>
  @import "dhtmlx-gantt/codebase/dhtmlxgantt.css";
  /* 任务名前的logo */
  .gantt_tree_icon.gantt_file, .gantt_tree_icon.gantt_folder_open, .gantt_tree_icon.gantt_folder_closed {
    width: 10px;
    background-image: none;
  }

  /* 任务线 */
  .gantt_task_line {
    height: 16px !important;
    line-height: 16px !important;
    margin-top: 8px;
    border: none !important;
    border-radius: 8px;
  }

  .gantt_task_line.gantt_milestone {
    border-radius: 0;
  }

  /* 里程碑 */
  .gantt_task_line.gantt_milestone {
    width: 12px !important;
    height: 16px !important;
    border: none !important;
    background-color: inherit !important;
    background-size: cover;
  }

  /* 里程碑icon */
  .gantt_task_line.gantt_milestone .gantt_task_content {
    width: 12px;
    height: 16px;
    margin-left: 40px;
    transform: rotate(0deg) !important;
    /*background-image: url('../../../../assets/logo/logo.png') !important;*/
  }

  /* 左侧悬浮单元格背景色 */
  .gantt_grid_data .gantt_row.odd:hover, .gantt_grid_data .gantt_row:hover {
    background-color: #f3f1fe !important;
  }

  /* 选中一行背景色 */
  .gantt_grid_data .gantt_row.gantt_selected, .gantt_grid_data .gantt_row.odd.gantt_selected, .gantt_task_row.gantt_selected {
    background-color: #f3f1fe !important;
  }

  /* 选中一行每个单元格右border颜色 */
  .gantt_task_row.gantt_selected .gantt_task_cell {
    border-right-color: #f3f1fe !important;
  }

  /* 标记线 */
  .gantt_marker {
    background-color: #f4ae05;
    opacity: .8;
  }


  /*滚动条整体样式*/
  .gantt-wrapper ::-webkit-scrollbar {
    width: 14px; /*宽分别对应竖滚动条的尺寸*/
    height: 6px; /*高分别对应横滚动条的尺寸*/
  }

  /*滚动条里面轨道*/
  .gantt-wrapper ::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, .2);
    border-radius: 5px;
  }

  /*滚动条里面拖动条*/
  .gantt-wrapper ::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .3);
    border-radius: 5px;
  }

  .gantt-wrapper ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, .5);
    border-radius: 5px;
  }

  /* 展开收起背景图片 */
  .gantt_tree_icon.gantt_close, .gantt_tree_icon.gantt_open {
    background-image: none !important;
    position: relative;
  }

  /* 收起小三角 */
  .gantt_tree_icon.gantt_close::after {
    position: absolute;
    content: '';
    top: 14px;
    left: 10px;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    border-top: 6px solid #999999;

  }

  /* 展开小三角 */
  .gantt_tree_icon.gantt_open::after {
    position: absolute;
    content: '';
    top: 12px;
    left: 12px;
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    border-left: 6px solid #999999;
  }

  /* 下方滚动条宽度 */
  .gantt_layout_cell .gantt_hor_scroll {
    width: calc(100% - 199px) !important;
    left: 199px;
  }

  .scaleStyle {
    height: 20px;
  }

  /* 周末背景颜色 */
  .weekend {
    background: rgb(189, 185, 186) !important;
    width: 30px;
  }
</style>
